<template>
  <div class="container">
    <div class="item">
      <div class="demo-inner-divider">状态尺寸</div>
      样式1
      <e-tag size="default">迷你标签</e-tag>
      <e-tag size="medium" dark>中型标签</e-tag>
      <e-tag size="large">大等标签</e-tag>
    </div>
    <div class="item">
      可删除
      <!-- <e-tag size="mini" closable>迷你标签</e-tag>
      <e-tag size="small" closable>小型标签</e-tag>
      <e-tag closable>中等标签</e-tag> -->
      <e-tag v-if="show" closable @on-close="handleClose">可删除的标签</e-tag>
    </div>
    <div class="item">
      <div>通过设置 type 属性为 border 或 dot 来选择不同的样式类型。建议有关闭的某些场景下使用 border，图例的场景下使用 dot。</div>
      <e-tag type="border">标签三</e-tag>
      <e-tag type="border" closable>标签四</e-tag>
      <e-tag type="dot">标签一</e-tag>
      <e-tag type="dot" closable>标签二</e-tag>

      <div class="demo-inner-divider">状态标签</div>
      大等尺寸
      <e-tag size="large" color="success" dark :checked="true">标签一</e-tag>
      <e-tag size="large" color="error" dark>标签二</e-tag>
      <e-tag size="large" color="warning" dark>标签三</e-tag>
      <e-tag size="large" color="primary" dark>标签四</e-tag>
      <e-tag size="large" dark>标签五</e-tag>
      <!--  -->
      <e-tag size="large" color="success">标签一</e-tag>
      <e-tag size="large" color="error">标签二</e-tag>
      <e-tag size="large" color="warning">标签三</e-tag>
      <e-tag size="large" color="primary">标签四</e-tag>
      <e-tag size="large">标签五</e-tag>
      <!--  -->
      <e-tag size="large" color="success" type="border">标签一</e-tag>
      <e-tag size="large" color="error"  type="border">标签二</e-tag>
      <e-tag size="large" color="warning"  type="border">标签三</e-tag>
      <e-tag size="large" color="primary"  type="border">标签四</e-tag>
      <e-tag size="large"  type="border">标签五</e-tag>
      <!--  -->
      <e-tag size="large" color="success" type="border" dark :checked="false">标签一</e-tag>
      <e-tag size="large" color="error" type="border" dark>标签二</e-tag>
      <e-tag size="large" color="warning" type="border" dark>标签三</e-tag>
      <e-tag size="large" color="primary" type="border" dark>标签四</e-tag>
      <e-tag size="large" type="border" dark>标签五</e-tag>
    </div>
    <div class="item">
      中等尺寸
      <br />
      <e-tag size="medium" color="success" dark :checked="true">标签一</e-tag>
      <e-tag size="medium" color="error" dark>标签二</e-tag>
      <e-tag size="medium" color="warning" dark>标签三</e-tag>
      <e-tag size="medium" color="primary" dark>标签四</e-tag>
      <e-tag size="medium" dark>标签五</e-tag>
      <!--  -->
      <e-tag size="medium" color="success">标签一</e-tag>
      <e-tag size="medium" color="error">标签二</e-tag>
      <e-tag size="medium" color="warning">标签三</e-tag>
      <e-tag size="medium" color="primary">标签四</e-tag>
      <e-tag size="medium">标签五</e-tag>
      <!--  -->
      <e-tag size="medium" color="success" type="border">标签一</e-tag>
      <e-tag size="medium" color="error"  type="border">标签二</e-tag>
      <e-tag size="medium" color="warning"  type="border">标签三</e-tag>
      <e-tag size="medium" color="primary"  type="border">标签四</e-tag>
      <e-tag size="medium"  type="border">标签五</e-tag>
      <!--  -->
      <e-tag size="medium" color="success" type="border" dark :checked="true">标签一</e-tag>
      <e-tag size="medium" color="error" type="border" dark>标签二</e-tag>
      <e-tag size="medium" color="warning" type="border" dark>标签三</e-tag>
      <e-tag size="medium" color="primary" type="border" dark>标签四</e-tag>
      <e-tag size="medium" type="border" dark>标签五</e-tag>
    </div>
    <div class="item">
      默认大小
      <e-tag color="success" dark :checked="true">标签一</e-tag>
      <e-tag color="error" dark>标签二</e-tag>
      <e-tag color="warning" dark>标签三</e-tag>
      <e-tag color="primary" dark>标签四</e-tag>
      <e-tag dark>标签五</e-tag>
      <!--  -->
      <e-tag color="success">标签一</e-tag>
      <e-tag color="error">标签二</e-tag>
      <e-tag color="warning">标签三</e-tag>
      <e-tag color="primary">标签四</e-tag>
      <e-tag>标签五</e-tag>
      <!--  -->
      <e-tag color="success" type="border">标签一</e-tag>
      <e-tag color="error"  type="border">标签二</e-tag>
      <e-tag color="warning"  type="border">标签三</e-tag>
      <e-tag color="primary"  type="border">标签四</e-tag>
      <e-tag  type="border">标签五</e-tag>
      <!--  -->
      <e-tag color="success" type="border" dark :checked="true">标签一</e-tag>
      <e-tag color="error" type="border" dark>标签二</e-tag>
      <e-tag color="warning" type="border" dark>标签三</e-tag>
      <e-tag color="primary" type="border" dark>标签四</e-tag>
      <e-tag type="border" dark>标签五</e-tag>

    </div>
    <div class="item">
      <div class="demo-inner-divider">可删除的标签</div>
      <e-tag color="success" closable @close="showAlert">标签一</e-tag>
      <e-tag color="error" closable>标签二</e-tag>
      <e-tag color="warning" closable>标签三</e-tag>
      <e-tag color="primary" closable>标签四</e-tag>
      <e-tag closable>标签五</e-tag>
    </div>
    <div class="item">
      <div class="demo-inner-divider">可添加的标签</div>
      <e-tag v-for="item in count" :key="item" :name="item" closable>标签{{ item + 1 }}</e-tag>
      <e-button icon="add" type="dashed" size="small" @click="handleAdd">添加标签</e-button>
    </div>
    <div class="item">
      <div class="demo-inner-divider">圆点标签</div>
      <e-tag size="medium" color="success" type="dot">标签一</e-tag>
      <e-tag color="error" type="dot">标签二</e-tag>
      <e-tag color="warning" type="dot">标签三</e-tag>
      <e-tag color="primary" type="dot">标签四</e-tag>
      <e-tag type="dot">标签五</e-tag>
      <e-tag size="medium" color="success" type="dot" closable>标签一</e-tag>
      <e-tag color="error" type="dot" closable>标签二</e-tag>
      <e-tag color="warning" type="dot" closable>标签三</e-tag>
      <e-tag color="primary" type="dot" closable>标签四</e-tag>
      <e-tag type="dot" closable>标签五</e-tag>
    </div>
    <div class="item">
      <div class="demo-inner-divider">带动效的圆点标签</div>
      <e-tag size="medium" color="primary" aniamation @close="showAlert" type="dot">标签一</e-tag>
      <e-tag color="error" aniamation type="dot">标签二</e-tag>
      <e-tag color="warning" aniamation type="dot">标签三</e-tag>
      <e-tag  type="dot" aniamation>标签四</e-tag>
      <e-tag color="success" aniamation type="dot">标签五</e-tag>
    </div>
    <div class="item">
      <div class="demo-inner-divider">可选择标签</div>
      <e-tag checkable size="medium" color="error" name="1" @on-change="onChange">标签一</e-tag>
      <e-tag checkable size="medium" color="warning" name="2" @on-change="onChange">标签二</e-tag>
      <e-tag checkable size="medium" color="primary" name="3" @on-change="onChange">标签三</e-tag>
    </div>
    <div class="item">
      <div class="demo-inner-divider">自定义图标标签</div>
      <e-tag size="medium" closable @on-close="showAlert">
        <svg
          style="vertical-align: middle"
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>成功</title>
          <g id="Tag标签-走查" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Tag标签" transform="translate(-95.000000, -1289.000000)" fill="#337DFF" fill-rule="nonzero">
              <g id="编组-23" transform="translate(80.000000, 1283.000000)">
                <g id="编组-22" transform="translate(15.000000, 5.000000)">
                  <g id="成功" transform="translate(0.000000, 1.000000)">
                    <path
                      d="M8.04697987,1 C11.8993289,1 15,4.10067114 15,8.04697987 C15,11.8993289 11.8993289,15 8.04697987,15 C4.19463087,15 1,11.8993289 1,8.04697987 C1,4.19463087 4.10067114,1 8.04697987,1 Z M11.6686838,5.50200627 C11.4604042,5.29372665 11.1227162,5.29372665 10.9144366,5.50200627 L6.99455339,9.42170021 L5.08556342,7.51282327 L5.04751753,7.47823012 C4.83800358,7.30526434 4.52734407,7.31679539 4.33131619,7.51282327 C4.12303656,7.72110289 4.12303656,8.05879088 4.33131619,8.2670705 L6.52318698,10.4589413 C6.78353651,10.7192908 7.20564649,10.7192908 7.46599602,10.4589413 L11.6686838,6.25625351 L11.703277,6.21820762 C11.8762427,6.00869367 11.8647117,5.69803415 11.6686838,5.50200627 Z"
                      id="形状结合"></path>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </svg>
        标签一
      </e-tag>
      <e-tag size="medium" closable @on-close="showAlert">
        <svg style="vertical-align: middle" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>label</title>
          <g id="Tag标签-走查" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Tag标签" transform="translate(-234.000000, -1289.000000)">
              <g id="编组-26" transform="translate(219.000000, 1283.000000)">
                <g id="编组-25" transform="translate(15.000000, 5.000000)">
                  <g id="关闭备份-2" transform="translate(0.000000, 1.000000)">
                    <rect id="矩形备份-5" x="0" y="0" width="16" height="16"></rect>
                    <g id="编组" transform="translate(1.333333, 1.333333)" fill="#337DFF" fill-rule="nonzero">
                      <path d="M6.50356939,0.320157953 L13.1198956,6.93648416 C13.4044792,7.22106781 13.4044792,7.68246908 13.1198956,7.96705273 L7.96705273,13.1198956 C7.68246908,13.4044792 7.22106781,13.4044792 6.93648416,13.1198956 L0.320157953,6.50356939 C0.103501742,6.28691318 -0.0122760451,5.98927143 0.00103304017,5.68316247 L0.208772576,0.905153142 C0.225189587,0.527561888 0.527561888,0.225189587 0.905153142,0.208772576 L5.68316247,0.00103304017 C5.98927143,-0.0122760451 6.28691318,0.103501742 6.50356939,0.320157953 Z M5.72659969,1.0000892 L1.197,1.197 L1.00000123,5.72659969 C0.999239183,5.74615005 1.00457249,5.76529482 1.01507573,5.78142877 L1.02726473,5.79646261 L7.45166667,12.221 L12.221,7.45166667 L5.79646261,1.02726473 C5.78262536,1.01342748 5.76490886,1.00442236 5.74591836,1.00126276 L5.72659969,1.0000892 Z" id="矩形"></path>
                      <path d="M3.10868906,3.10868906 C3.73883001,2.47854811 4.76049035,2.47854811 5.3906313,3.10868906 C6.02077225,3.73883001 6.02077225,4.76049035 5.3906313,5.3906313 C4.76049035,6.02077225 3.73883001,6.02077225 3.10868906,5.3906313 C2.47854811,4.76049035 2.47854811,3.73883001 3.10868906,3.10868906 Z M4.68352452,3.81579584 C4.44390786,3.57617918 4.0554125,3.57617918 3.81579584,3.81579584 C3.57617918,4.0554125 3.57617918,4.44390786 3.81579584,4.68352452 C4.0554125,4.92314117 4.44390786,4.92314117 4.68352452,4.68352452 C4.92314117,4.44390786 4.92314117,4.0554125 4.68352452,3.81579584 Z" id="椭圆形"></path>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </svg>
        标签二
      </e-tag>
    </div>

    <div class="item">
      <div>不可用</div>
      <e-tag size="large" disabled checkable>不可选</e-tag>
      <e-tag size="large" color="red">自定义color</e-tag>
      <e-tag type="border" color="green">magenta</e-tag>
      <e-tag color="red" type="border">red</e-tag>
      <e-tag color="volcano">volcano</e-tag>
      <e-tag color="orange">orange</e-tag>
      <e-tag color="gold">gold</e-tag>
      <e-tag color="yellow">yellow</e-tag>
      <e-tag color="lime">lime</e-tag>
      <e-tag color="green">green</e-tag>
      <e-tag color="cyan">cyan</e-tag>
      <e-tag color="blue">blue</e-tag>
      <e-tag color="geekblue">geekblue</e-tag>
      <e-tag color="purple">purple</e-tag>
    </div>

    <div class="item">

      <e-tooltip :max-width="300">
        <e-tag color="primary" size="medium">
          <div class="item-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, fugit corporis voluptatem excepturi inventore tenetur provident officiis reprehenderit nesciunt illum dicta amet dolore earum incidunt ad quasi voluptas cum perspiciatis?</div>
        </e-tag>
        <template #content>
          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, fugit corporis voluptatem excepturi inventore tenetur provident officiis reprehenderit nesciunt illum dicta amet dolore earum incidunt ad quasi voluptas cum perspiciatis?</div>
        </template>

      </e-tooltip>


    </div>
    <tag-md class="markdown-body"></tag-md>
  </div>
</template>
<script setup>
import tagMd from '../../docs/tag.md';
</script>
<script>
export default {
  data () {
    return {
      count: [0, 1, 2],
      show:true
    }
  },
  methods: {
    showAlert (e) {
      alert(`close事件.`)
    },
    handleAdd () {
      if (this.count.length) {
        this.count.push(this.count[this.count.length - 1] + 1);
      } else {
        this.count.push(0);
      }
    },
    handleClose () {
      this.show = false;
    },
    onChange (checked,name) {
      console.log('change',checked,name)
    }
  }
}
</script>
<style scoped>
.item {
  margin: 20px;
}

.item-content{
 width: 150px;
  height: auto;
  word-wrap: break-word; /*强制换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis;/*隐藏后添加省略号*/
  white-space: nowrap;/*强制不换行*/
}
.e-tag {
  /* margin-right: 10px; */
}</style>
